<script setup>
import {onBeforeUnmount, onMounted, ref} from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import * as echarts from 'echarts';
import router from "@/router/index.js";

const time = ref('')
let timeInterval = null;
// 学校心理情况图相关配置
const option1 = ref({
  tooltip: {
    trigger: 'item'
  },
  color: ['#ffa40c', '#ffdc1a', '#53e09e', '#5956f4'],
  series: [
    {
      name: '健康状况',
      type: 'pie',
      radius: ['50%', '70%'],
      // 开启自动避让
      avoidLabelOverlap: true,
      center: ['50%', '50%'],
      itemStyle: {
        borderRadius: 6,
      },
      label: {
        show: true,
        position: 'outside',           // 标签在外部
        formatter: '{b}\n{d}%',        // 显示名称 + 换行 + 百分比
        // formatter: '{b}: {d}%',     // 也可以写在同一行
        color: '#9ecbe7',
        fontSize: 10
      },
      labelLine: {
        show: true,                    // 显示引导线
        smooth: true                  // 可选：true 表示曲线
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 10,
          fontWeight: 'bold'
        }
      },
      data: [
        {value: 95, name: '危机'},
        {value: 317, name: '预警'},
        {value: 598, name: '一般'},
        {value: 2152, name: '健康'}
      ]
    }
  ]
})
// 学校各部门测评情况图配置
const option2 = ref({
  color: ['#ffe800', '#0052ff', '#00ffff'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '10px',           // 左侧留适当空间给 y 轴标签
    top: '6px',
    bottom: '40px',
    containLabel: true      // 推荐：确保所有标签都被包含在内，自动调整
  },
  legend: {
    // orient: 'vertical',     // 垂直排列（推荐用于右侧）
    itemGap: 10,
    bottom: 10,
    left: 50,
    // 可选：修改图例文字颜色
    textStyle: {
      color: '#4ac6ea' // 图例文字颜色
    }
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    splitLine: {
      show: false  // 🔥 关闭竖直方向的网格线
    },
    axisLabel: {
      color: '#4ac6ea'
    }
  },
  yAxis: {
    type: 'category',
    data: ['资源与安全学院', '智能制造学院', '电气工程学院', '信息工程学院', '人工智能学院'],
    axisLabel: {
      color: '#4ac6ea',
    }
  },
  barCategoryGap: '50%',
  series: [
    {
      name: '预警人数',
      type: 'bar',
      data: [15, 14, 21, 54, 43],
      barWidth: '30%',
      label: {
        show: true,           // 显示标签（即数值）
        position: 'right', // 可选：'top', 'insideTop', 'right' 等
        color: '#4ac6ea',         // 字体颜色
        fontSize: 8
      },
    },
    {
      name: '总人数',
      type: 'bar',
      data: [340, 320, 524, 630, 654],
      barWidth: '30%',

      label: {
        show: true,           // 显示标签（即数值）
        position: 'right', // 可选：'top', 'insideTop', 'right' 等
        color: '#4ac6ea',         // 字体颜色
        fontSize: 8
      },
    },
    {
      name: '参与人数',
      type: 'bar',
      data: [324, 279, 434, 602, 545],
      barWidth: '30%',

      label: {
        show: true,           // 显示标签（即数值）
        position: 'right', // 可选：'top', 'insideTop', 'right' 等
        color: '#4ac6ea',         // 字体颜色
        fontSize: 8
      },
    }
  ],
  barGap: '5%'
})
// 用户端功能使用情况图配置
const option3 = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical', // 可以选择 'horizontal' 改为横向布局
    itemGap: 15,
    right: 5,
    top: 20,
    data: ['测评', '趣味游戏', '心理练习', '呼吸训练', '心情打卡' ],
    textStyle: {
      color: '#4ac6ea', // 将标签颜色修改为蓝色
      fontSize: 12
    }
  },
  // 添加color数组来设置legend小方格的颜色
  color: ['#1E88E5', '#4CAF50', '#FFC107', '#FF9800', '#F44336', '#9C27B0'],
  series: [
    // 测评
    {
      name: '测评',
      type: 'pie',
      radius: ['72%', '80%'],
      center: ['40%', '50%'],
      startAngle: 90,
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: 'transparent',
        borderWidth: 0
      },
      label: { show: false }, // 关闭标签显示
      labelLine: { show: false }, // 关闭引导线显示
      data: [
        { value: 73, itemStyle: { color: '#1E88E5' } },
        { value: 27, itemStyle: { color: 'transparent' } }
      ]
    },
    // 趣味游戏
    {
      name: '趣味游戏',
      type: 'pie',
      radius: ['63%', '71%'],
      center: ['40%', '50%'],
      startAngle: 90,
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: 'transparent',
        borderWidth: 0
      },
      label: { show: false },
      labelLine: { show: false },
      data: [
        { value: 62, itemStyle: { color: '#4CAF50' } },
        { value: 38, itemStyle: { color: 'transparent' } }
      ]
    },
    // 心理练习
    {
      name: '心理练习',
      type: 'pie',
      radius: ['54%', '62%'],
      center: ['40%', '50%'],
      startAngle: 90,
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: 'transparent',
        borderWidth: 0
      },
      label: { show: false },
      labelLine: { show: false },
      data: [
        { value: 87, itemStyle: { color: '#FFC107' } },
        { value: 13, itemStyle: { color: 'transparent' } }
      ]
    },
    // 呼吸训练
    {
      name: '呼吸训练',
      type: 'pie',
      radius: ['45%', '53%'],
      center: ['40%', '50%'],
      startAngle: 90,
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: 'transparent',
        borderWidth: 0
      },
      label: { show: false },
      labelLine: { show: false },
      data: [
        { value: 51, itemStyle: { color: '#FF9800' } },
        { value: 49, itemStyle: { color: 'transparent' } }
      ]
    },
    // 心情打卡
    {
      name: '心情打卡',
      type: 'pie',
      radius: ['36%', '44%'],
      center: ['40%', '50%'],
      startAngle: 90,
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: 'transparent',
        borderWidth: 0
      },
      label: { show: false },
      labelLine: { show: false },
      data: [
        { value: 76, itemStyle: { color: '#F44336' } },
        { value: 24, itemStyle: { color: 'transparent' } }
      ]
    }
  ]
})
// 学校心理问题情况图配置
const option4 = ref({
  tooltip: {
    trigger: 'item'
  },
  color: ['#5aaef3', '#cc45f4', '#946fec', '#5b98e3', '#23c2db'],
  series: [
    {
      name: '健康状况',
      type: 'pie',
      radius: ['50%', '70%'],
      // 开启自动避让
      avoidLabelOverlap: true,
      center: ['50%', '50%'],
      itemStyle: {
        borderRadius: 6,
      },
      label: {
        show: true,
        position: 'outside',           // 标签在外部
        formatter: '{b}\n{d}%',        // 显示名称 + 换行 + 百分比
        // formatter: '{b}: {d}%',     // 也可以写在同一行
        color: '#9ecbe7',
        fontSize: 10
      },
      labelLine: {
        show: true,                    // 显示引导线
        smooth: true                  // 可选：true 表示曲线
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 10,
          fontWeight: 'bold'
        }
      },
      data: [
        {value: 12, name: '适应'},
        {value: 5, name: '人际关系'},
        {value: 84, name: '学校压力'},
        {value: 25, name: '抑郁'},
        {value: 176, name: '焦虑'},
      ]
    }
  ]
})
const chart2IsShowMore = ref(false)

// 退出登录
const loginOut = () => {
  ElMessage.success('成功退出登录')
  router.push("/login");
}
// 展示更多的用户端功能使用情况图配置
const chart2ShowMore = () => {
  let chart2Box = document.getElementById('mt4-box');
  let chart2 = echarts.init(chart2Box);
  option2.value.yAxis.data = [ '资源与安全学院', '智能制造学院', '电气工程学院', '信息工程学院', '人工智能学院', '交通学院', '土木工程学院', '财商学院', '体育艺术学院', '马克思主义学院', '公共基础学夸' ]
  option2.value.series[0].data = [15, 14, 21, 54, 43, 45, 12, 12, 16, 45, 26]
  option2.value.series[1].data = [340, 320, 524, 630, 654, 548, 895, 154, 564, 457, 652]
  option2.value.series[2].data = [324, 279, 434, 602, 545, 512, 754, 145, 478, 365, 587]
  chart2.setOption(option2.value)
  chart2IsShowMore.value = true
}
// 取消展示更多的用户端功能使用情况图配置
const chart2NotShowMore = () => {
  let chart2Box = document.getElementById('mt4-box');
  let chart2 = echarts.init(chart2Box);
  option2.value.yAxis.data = [ '资源与安全学院', '智能制造学院', '电气工程学院', '信息工程学院', '人工智能学院' ]
  option2.value.series[0].data = [15, 14, 21, 54, 43 ]
  option2.value.series[1].data = [340, 320, 524, 630, 654 ]
  option2.value.series[2].data = [324, 279, 434, 602, 545 ]
  chart2.setOption(option2.value)
  chart2IsShowMore.value = false
}
onMounted(() => {
  // 初始化时间
  time.value = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
  // 设置定时器，每秒更新时间
  timeInterval = setInterval(() => {
    time.value = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
  }, 1000);

  // 学校心理情况图
  let chart1Box = document.getElementById('mt3-box');
  let chart1 = echarts.init(chart1Box);
  // 学校各部门测评情况图
  let chart2Box = document.getElementById('mt4-box');
  let chart2 = echarts.init(chart2Box);
  // 用户端功能使用情况图
  let chart3Box = document.getElementById('mt5-box');
  let chart3 = echarts.init(chart3Box);
  // 学校心理问题情况图
  let chart4Box = document.getElementById('mt6-box');
  let chart4 = echarts.init(chart4Box);

  // 设置图形配置
  option1.value && chart1.setOption(option1.value);
  option2.value && chart2.setOption(option2.value);
  option3.value && chart3.setOption(option3.value);
  option4.value && chart4.setOption(option4.value);

  // 监听窗口 resize 事件
  const handleResize = () => {
    chart1?.resize();
    chart2?.resize();
    chart3?.resize();
    chart4?.resize();
  };

  // 添加窗口变化的监听事件
  window.addEventListener('resize', handleResize);

  // 组件卸载前移除监听，防止内存泄漏
  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
    // 销毁图表实例
    chart1?.dispose();
    chart2?.dispose();
    chart3?.dispose();
    chart4?.dispose();
    // 清除定时器
    if (timeInterval) {
      clearInterval(timeInterval);
      timeInterval = null;
    }
  });
})
</script>

<template>
<div class="bg">
  <!-- 上部 -->
  <div class="top">
    <div class="top-mid">河南工业和信息化职业学院心理服务平台</div>
    <div class="top-right">
      <div style="color: #3593c9;font-size: 18px;text-align: right">{{ time }}</div>
      <div style="color: white;font-size: 14px;display: flex;align-items: center"><img src="@/assets/images/DataBoard/人物.png" alt="" width="40px">河南工业和信息化职业学院&nbsp;&nbsp;
        <router-link to="" @click="loginOut()">退出登录</router-link>
      </div>
    </div>
  </div>

  <!-- 中部 -->
  <div class="w mid">
    <div class="mid-item">
      <div class="item-t-bet">测评计划</div>
      <div class="mt1-box">
        <div style="padding: 3px 0; color: white;text-align: center">正在进行的测评计划</div>
        <div class="mt1-item">
          <img src="@/assets/images/DataBoard/评测计划书写图.png" alt="" width="40px" />
          <div class="mt1-item-mid">新生入学心理健康普查</div>
          <sapn style="font-size: 26px;color: white">98%</sapn>
        </div>
        <div class="mt1-item">
          <img src="@/assets/images/DataBoard/评测计划书写图.png" alt="" width="40px" />
          <div class="mt1-item-mid">全校心理健康普查</div>
          <sapn style="font-size: 26px;color: white">87%</sapn>
        </div>
        <div class="mt1-item">
          <img src="@/assets/images/DataBoard/评测计划书写图.png" alt="" width="40px" />
          <div class="mt1-item-mid">查看更多</div>
        </div>
      </div>
    </div>
    <div class="mid-item">
      <div class="item-t-mid">数据概览</div>
      <div class="mt2-box">
        <div class="mt2-item">
          <img src="@/assets/images/DataBoard/数据概览图1.png" alt="" height="50%">
          <div class="mt2-item-r">
            累计评测人数
            <span style="font-size: 30px;font-weight: 600">11321人</span>
          </div>
        </div>
        <div class="mt2-item">
          <img src="@/assets/images/DataBoard/数据概览图2.png" alt="" height="50%">
          <div class="mt2-item-r">
            累计干预人数
            <span style="font-size: 30px;font-weight: 600">527人</span>
          </div>
        </div>
        <div class="mt2-item">
          <img src="@/assets/images/DataBoard/数据概览图3.png" alt="" height="50%">
          <div class="mt2-item-r">
            累计预警人数
            <span style="font-size: 30px;font-weight: 600">419人</span>
          </div>
        </div>
        <div class="mt2-item">
          <img src="@/assets/images/DataBoard/数据概览图4.png" alt="" height="50%">
          <div class="mt2-item-r">
            累计建档人数
            <span style="font-size: 30px;font-weight: 600">34158人</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mid-item">
      <div class="item-t-bet">学校心理情况</div>
      <div id="mt3-box"></div>
    </div>
  </div>

  <!-- 下部 -->
  <div class="w bottom">
    <div class="bottom-item">
      <div class="item-t-bet">学校各部门评测情况</div>
      <div id="mt4-box">
      </div>
      <div id="chart2-show-more" @click="chart2ShowMore" v-show="!chart2IsShowMore">查看更多<el-icon><ArrowRightBold /></el-icon></div>
      <div id="chart2-show-more" @click="chart2NotShowMore" v-show="chart2IsShowMore">收起<el-icon><ArrowRightBold /></el-icon></div>
    </div>
    <div class="bottom-item">
      <div class="item-t-mid">用户功能使用情况</div>
      <div id="mt5-box"></div>
    </div>
    <div class="bottom-item">
      <div class="item-t-bet">学校心理问题情况</div>
      <div class="mt6-box-arround">
        <div id="mt6-box"></div>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped>
#chart2-show-more {
  position: absolute;
  bottom: 15px;
  right: 8px;
  color: white;
  font-size: 14px;
  cursor: pointer
}
#chart2-show-more:hover {
  color: #1ae6e7;
}
.bg {
  width: 100%;
  height: 110vh;
  background: url('@/assets/images/DataBoard/数据大屏背景图片.png') center center / 100% 100% no-repeat;
}
.top {
  position: relative;
}
.top-mid {
  padding-top: 3px;
  margin: 0 auto;
  width: 1000px;
  height: 68px;
  background: url('@/assets/images/DataBoard/标题背景.png') center center / 100% 100% no-repeat;
  font-size: 26px;
  text-align: center;
  color: #85a5dd;
}
.top-right {
  position: absolute;
  top: 0;
  right: 20px;
}
.top-right a {
  color: #25afdd;
}
.top-right a:hover {
  color: red;
}
.w {
  width: 1400px;
  margin: 0 auto;
}
.mid {
  display: flex;
  justify-content: space-between;
}
.mid-item {
  width: 410px;
  height: 270px;
}
.mid-item:hover .item-t-bet {
  padding-left: 50px;
}
.mid-item:hover .item-t-mid {
  font-size: 18px;
}
.mt1-box {
  margin-top: 5px;
  height: 220px;
  background: url('@/assets/images/DataBoard/mt1-bg.png') center center / 100% 100% no-repeat;
  transition: all 0.3s ease-in-out;
}
.mt1-box:hover {
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
.mt1-item {
  padding: 0 30px;
  display: flex;
  justify-content: left;
  align-items: center;
  margin-top: 10px;
  height: 50px;
}
.mt1-item-mid {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 16px;
  margin-right: 20px;
  width: 210px;height: 100%;
  background: url('@/assets/images/DataBoard/评测计划bg2.png') center center / 100% 100% no-repeat;
  font-size: 20px;
  font-weight: 600;
  color: #58ecfd;
}
.mt2-box {
  padding: 0 14px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.mt2-item {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 18px;
  width: 180px;
  height: 80px;
}
.mt2-item-r {
  width: 120px;
  height: 80%;
  color: white;
}
#mt3-box {
  margin-top: 8px;
  height: 216px;
  background: url('@/assets/images/DataBoard/mt1-bg.png') center center / 100% 100% no-repeat;
  transition: all 0.3s ease-in-out;
}
#mt3-box:hover {
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
#mt4-box {
  margin-top: 8px;
  height: 320px;
  background: url('@/assets/images/DataBoard/mt1-bg.png') center center / 100% 100% no-repeat;
  transition: all 0.3s ease-in-out;
  border-radius: 12px;
}
#mt4-box:hover {
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
#mt5-box {
  margin-top: 8px;
  height: 320px;
  background: url('@/assets/images/DataBoard/mt1-bg.png') center center / 100% 100% no-repeat;
  transition: all 0.3s ease-in-out;
  border-radius: 12px;
}
#mt5-box:hover {
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
.mt6-box-arround {
  padding-top: 50px;
  margin-top: 8px;
  height: 320px;
  background: url('@/assets/images/DataBoard/mt1-bg.png') center center / 100% 100% no-repeat;
  transition: all 0.3s ease-in-out;
  border-radius: 12px;
}
.mt6-box-arround:hover {
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
#mt6-box {
  margin-top: 8px;
  height: 216px;
}
.bottom {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}
.bottom-item {
  position: relative;
  width: 410px;
  height: 370px;
}
.bottom-item:hover .item-t-bet {
  padding-left: 50px;
}
.bottom-item:hover .item-t-mid {
  font-size: 18px;
}
.item-t-bet {
  display: flex;
  align-items: center;
  height: 40px;
  padding-left: 28px;
  color: white;
  background: url('@/assets/images/DataBoard/item-t-left.png') center left / contain no-repeat;
  transition: all 0.3s ease;

}
.item-t-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  color: white;
  background: url('@/assets/images/DataBoard/item-t-mid.png') center center / contain no-repeat;
  transition: all 0.3s ease;
}
</style>